<template>
  <div>
    <!--  <van-tabs
      v-model="curC1Id"
      @click="navClickHandle"
      offset-top="20px"
      sticky
    >
      <van-tab
        :title="c1.name"
        :key="c1.id"
        :name="c1.id"
        v-for="c1 in categoryL1List1"
      >
      </van-tab>
    </van-tabs> -->

    <div class="shopNav">
      <div v-show="secne == 0" class="secne0">
        <van-tabs
          sticky
          class="tantabs"
          v-model="curC1Id"
          @click="navClickHandle"
        >
          <van-tab
            :name="item.id"
            v-for="(item, index) in categoryL1List1"
            :title="item.name"
            :key="index"
          >
            <!-- 内容 {{ index }} -->
          </van-tab>
        </van-tabs>

        <div>
          <van-icon
            size="20px"
            name="arrow-down"
            class="my-icon"
            @click="handler"
          />
        </div>
      </div>
      <div v-show="secne == 1" class="sence1">
        <van-icon
          size="20px"
          name="arrow-up"
          class="my-icons"
          @click="handler2"
        />
        <span>全部频道</span>
        <div class="shoptab">
          <ul>
            
            <li
              @click="navClickHandle(item.id, item.name)"
              v-for="(item, index) in categoryL1List1"
              :key="index"
            >
              <span>{{ item.name }}</span>
            </li>
          </ul>
        </div>
        <div class="mask"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "NavType",
  data() {
    return {
      curC1Id: '',
      secne: 0,
      show: false,
    };
  },
  computed: {
    ...mapGetters(["categoryL1List1"]),
  },
  methods: {
    handler() {
      (this.secne = 1), (this.show = true);
    },
    handler2() {
      (this.secne = 0), (this.show = false);
    },
    updateNavId(id) {
      this.curC1Id = id-0
    },
    navClickHandle(name, title) {
      this.curC1Id = name;
      if (title == "为你推荐") {
        this.$router.push({
          path: "/home",
        });
        return;
      }
      this.handler2();
      this.$router.push({
        path: "/item/list",
        query: {
          categoryId: this.curC1Id,
        },
      });
    },
  },

  watch: {},
};
</script>

<style lang="less" scoped>
.shopNav {
  .my-icon {
    // z-index: 1;
    // position: relative;
    position: absolute;
    left: 345px;
    top: 80px;
    z-index: 3;
    background: white;
  }
  .sence1 {
    background: #fff;
    .mask {
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1;
      background: rgba(0, 0, 0, 0.5);
    }
    .my-icons {
      // z-index: 1;
      position: relative;
      left: 345px;
      bottom: 2px;
      background: white;
      transition: 0.5s;
    }
    span {
      font-size: 10px;
      position: relative;
      bottom: 10px;
    }
    .shoptab {
      position: absolute;
      z-index: 2;
      background: white;
      width: 414px;
      ul {
        li {
          width: 60px;
          height: 20px;
          border: 1px solid;
          float: left;
          margin: 8px 15px;
          background: #ededed;
          font-size: 10px;
          display: flex;
          span {
            line-height: 40px;
            margin-left: 9px;
            .active {
              border: 1px solid red;
              color: red;
            }
          }
          p {
            margin-top: 3px;
            margin-left: 19px;
          }
        }
      }
    }
  }
}
</style>